<template>
	<Container>
		<view class="header">
			<view
				class="article-box"
				v-for="index in assignment.comparedCount"
				:key="index"
				:style="{
					height: assignment.comparedCount < 4 ? '36vh' : assignment.comparedCount > 3 && assignment.comparedCount < 7 ? '18vh' : '',
					width: assignment.comparedCount == 1 ? '600rpx' : assignment.comparedCount === 2 ? '300rpx' : ''
				}"
			>
				<image class="comparedArticle img" :src="assignment.comparedArticle.imageUrl" mode="aspectFit"></image>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Record class="record" ref="audio" @recordFinish="recordFinish" :isStart="questionPress" :answerText="assignment.answerTexts" :typeCode="assignment.typeCode" />
		<Question :question="assignment.questionName"/>
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Record from '../record.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container, Record },
}
</script>

<style scoped lang="stylus">
.header
	height 50vh
	margin 5vh 0
	width 720rpx
	border-radius 70rpx
	border 12rpx solid #FCC77D
	background white
	box-sizing border-box
	display flex
	align-content center
	justify-content center
	flex-wrap wrap
	padding-top 1.5vh
	position relative
	.article-box
		width 220rpx
		height 13vh
		.comparedArticle
			width 100%
			height 100%
</style>
